<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { getChapterApi , deleteChapterApi} from '@/api/chapter'
import { useRoute } from 'vue-router'
const route = useRoute()
const novelDetailList = ref([])
const getChapter = async () => {
  const res = await getChapterApi(route.params.id)
    console.log(res.data.data)
  novelDetailList.value = res.data.data
}

watch( route.params.id, ()=>{
  console.log(route.params.id)
  getChapter()
})

const deleteChapter = async(row: novelDetailList.value) => {
  console.log(row)
  await deleteChapterApi(row)
  ElMessage.success('删除成功')
  
}
onMounted(() => {
  getChapter()
})
</script>
<template>
  <el-table :data="novelDetailList" height="250" style="width: 100%">
    <el-table-column prop="chapterId" label="章节序号" width="180" />
    <el-table-column prop="chapterName" label="章节列表" width="180" />
    <el-table-column prop="createtime" label="创建时间" width="180" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small">
          <a
            :href="`/updateChapter?novelId=${route.params.id}&chapterId=${scope.row.chapterId}`"
            >修改</a
          >
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          @click="deleteChapter(scope.row.chapterId)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<style>
a {
  text-decoration: none;
  color: #419eff;
}
</style>
